<!-- 
  vue和react都是组件化的，都是数据驱动视图。只需要关心数据，不需要关心DOM。
    vue: MVVM 
    react: setDtate
  
  如何实现数据驱动视图？
  答：虚拟DOM  

  操作真实DOM，比较慢，但是浏览器执行JS非常快的。DOM操作确实慢？如何解决？
  答：使用JS去模拟DOM(vdom)，运行js代码非常快。目的是为了让数据驱动视图可以快速响应。

  流程：
    1）初次渲染，操作真实DOM
    2）数据变了，得到一个新的vdom，还有一个老的vdom，计算出最小的变更（diff），根据变量，尽可能少的操作dom.

  下面是一片真实的DOM：
    <div id="div1" class="container">
      <p>vdom</p>
      <ul style="font-size: 20px;">
        <li>a</li>
      </ul>
    </div>
-->

<script>
  // 使用js模拟上面的真实DOM
  let vdom = {
    tag:"div",
    props:{
      id:"div1",
      className:"container"
    },
    children:[
      {
        tag:"p",
        children:"vdom"
      },
      {
        tag:"ul",
        props:{
          style:"font-size: 20px;"
        },
        children:[
          {
            tag:"li",
            children:"a"
          }
        ]
      }
    ]
  }
</script>